layui.use(['flow', 'form', 'layer', 'upload','element'], function () {
    var flow = layui.flow,
        form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        upload = layui.upload,
        $ = layui.jquery,
        element = layui.element;

    //流加载图片
    var imgNums = 8; //单页显示图片数量

    var FlowData;
    //获取数据
    $.get("http://127.0.0.1:8000/StundentBook", function (res) {
        FlowData = res;
        console.log(res);
        if(FlowData.data){
            xuanran();
        }
    });
    //渲染
    
    function xuanran(){
        $.get("technologyType.json", function (res) {
            var data = res.data;
            console.log( data);
        
            // for(let k in data){
            //     // console.log( data[k],data[k].name,data[k].id);
            //     tabAdd(data[k],'layui-this');
            //     // console.log(FlowData.data[data[k].name]);
            //     addFlow(data[k].id,FlowData.data[data[k].name],'layui-show');
            // }
            for(var i =0;i<data.length; i++){
                tabAdd(data[i]);
                addFlow(data[i].id,FlowData.data[data[i].name]);//分类的name必须为unique
                if(i == 0){
                    element.tabChange('technologyCard', data[i].id);
                }
            }
        
        });
    }
    function tabAdd(data){
        element.tabAdd('technologyCard', {
            title: data.name,
            content: '<form class="layui-form"><ul class="layer-photos-demo Images" id="'+data.id+'"></ul></form>',
            id: data.id
        });
    }
    function addFlow(elem,data){
        flow.load({
            elem: '#'+elem, //流加载容器
            done: function (page, next) { //加载下一页             
                //插入
                var imgList = [];
                var maxPage = imgNums * page < data.length ? imgNums * page : data.length;
                setTimeout(function () {
                    for (var i = imgNums * (page - 1); i < maxPage; i++) {
                        // imgList.push('<li><div class="uploadImgDiv"><input hidden value="'+ data[i].pid +'"><img layer-src="' + data[i].src + '" src="' +
                        //     data[i].thumb + '" alt="' + data[i].alt +
                        //     '"></div><div class="operate"><div class="check"><input type="checkbox" name="belle" lay-filter="choose" lay-skin="primary" title="' +
                        //     data[i].alt + '"></div><i class="layui-icon img_del">&#xe640;</i></div></li>');
                        imgList.push('<li><div class="uploadImgDiv"><input hidden value="'+ data[i].Teacher +'"><img layer-src="' + data[i].bookImg + '" src="' +
                        data[i].bookImg + '" alt="' +  data[i].bookName +
                            '"></div><div class="operate"><div class="check"><p  name="belle" lay-filter="choose" lay-skin="primary" title="' +
                            data[i].bookName + '">'+data[i].bookName+'</p><input hidden value="'+ data[i]. bookabstract+'"><a hidden value="'+ data[i].Connect+'"></a></div></div></li>');
                    }

                    next(imgList.join(''), page < (data.length / imgNums));
                    form.render();
                }, 500);     
            }
        });
    }

    //技术推荐详情
    function technologyDetail(edit) {
        var index = layui.layer.open({
            title: "技术推荐",
            type: 2,
            area: ['90%', '50%'],
            fixed: false, //不固定
            maxmin: true,
            content: "technologyDetail.html",
            success: function (layero, index) {
                var body = layui.layer.getChildFrame('body', index);
                if (edit) {
                    body.find(".title").val(edit.title);
                    body.find(".description").val(edit.description);
                    body.find(".thumbImg").attr("src",edit.src);
                    body.find(".teacherName").val(edit.id);
                    body.find(".link").val(edit.Connect);
                    // qian
                    body.find(".qian").attr("href",edit.Connect);
                    // $('.qian').attr('href',edit.Connect); 
                    form.render();
                }
                setTimeout(function () {
                    layui.layer.tips('点击此处返回', '.layui-layer-setwin .layui-layer-close', {
                        tips: 3
                    });
                }, 200)
            }
        })
    }
    //弹出层
    $("body").on("click", ".uploadImgDiv img", function () {
        let src = $(this).attr('src');
        let id = $(this).parent().find("input").attr('value');
        let title = $(this).parent().parent().find(".operate .check p").attr('title');
        let description = $(this).parent().parent().find(".operate .check input").attr('value');
        let Connect=$(this).parent().parent().find(".operate .check a").attr('value');
        var edit = {
            id,
            src,  
            title,
            description,
            Connect,
        }
        // console.log(edit);
        //根据id,调用api获取数据，后调用technologyDetail函数传入数据
        technologyDetail(edit);
    })

   
})